<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="../css/list.css"/>
    <link rel="stylesheet" href="../lib/swiper/swiper-bundle.min.css"/>
    <link rel="stylesheet" href="../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../css/common.css">
    <script src="../js/jquery-3.6.0.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
    <title>Document</title>
</head>
<body>
    <div class="container-fluid box1" style="position:sticky;top:0px;">
        <div class="container main">
            <div class="row">
                <div class="col-md-2 nav-left">
                    <a href="index.html"><img src="../img/logo_app.png"/></a>
                </div>
                <div class="col-md-7">
                    <ul class="nav nav-pills nav-justified nav1">
                        <li class="nav-item">
                          <a class="nav-link active" href="#">华为专区</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#">鸿蒙智联</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#">莫塞尔</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link disabled" href="#">华为智选</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled" href="#">HarmonyOS</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link disabled" href="#">特惠企采</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link disabled" href="#">教育购</a>
                          </li>
                      </ul>
                </div>
                <div class="col-md-2 row nav-right login text-right">
                  <!-- <a href="longin.html"><span class="	glyphicon glyphicon-user col-md-2"></span></a> -->
                  <!-- <a>欢迎<span style="color: rgb(57, 208, 228);font-size: 13px;"> ${username}</span></a><a href="javascript:;" class="logout">退出</a> -->
              </div>
                <div class="col-md-1 row nav-right">
                    <a href="cart.html"><span class="glyphicon glyphicon-shopping-cart col-md-2"></span></a>
                </div>
            </div>
        </div>
    </div>
    
      <div class="swiper" style="height:500px;width: 100%;z-index: 0;">
        <div class="swiper-wrapper">
            <div class="swiper-slide" index="1"><img src="https://res.vmallres.com/uomcdn/CN/cms/202206/AFD448344FB0E98085510A32B14396B6.png"/></div>
            <div class="swiper-slide" index="50"><img src="https://res.vmallres.com/uomcdn/CN/cms/202206/19CC314FB3E1853A7AD9F923F66E0A1C.jpg"/></div>
            <div class="swiper-slide" index="6"><img src="https://res.vmallres.com/uomcdn/CN/cms/202206/2BD559141EFCD89ED1A8ACB87D36FBF8.jpg"/></div>
            <div class="swiper-slide" index="61"><img src="https://res.vmallres.com/uomcdn/CN/cms/202206/2408EC650CEF43892ABB832B06E5A5EA.jpg"/></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        
        <!-- 如果需要导航按钮 -->
        <!-- <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div> -->
    </div>

    <div class="container-fluid hidden-xs bj">
      <div class="container">
            <div class="h4 text-center" style="font-weight:bold;">夏热爆款</div>
              <div class="row miaosha list">
    
                  <!-- <div class="col-sm-6 col-md-3 text-center " >
                    <a href="#" style="text-decoration: none;">
                      <div class="thumbnail tr">
                        <img src="../img/428_428_BBEC88BFE585CBC6FDB5A4AF49B8AC18C005ECA12ABED2AFmp.webp" alt="...">
                        <div class="caption">
                          <p><strong>OGAwA奥佳华家按摩椅 OG</strong></p>
                          <p class="dian">欢迎选购商品1欢迎选购商品1欢迎选购商品1</p>
                          <p style="color: rgb(232, 94, 94);">266￥</p>
                        </div>
                      </div>
                    </a>
                  </div> -->

            </div>
            <div class="page container text-center" id="page"></div>
      </div>
  </div>

</body>
</html>
<script>
    /*

    */
</script>
<script src="../lib/layer/layer.js"></script>
<script src="../lib/swiper/swiper-bundle.min.js"></script>
<script src="../lib/layui/layui.js"></script>
<script src="../utils/ajax.js"></script>
<script src="../utils/cookie.js"></script>
<script src="../js/list.js"></script>
<script>        
  var mySwiper = new Swiper ('.swiper', {
    // direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    speed:800,
    autoplay : {
    // pauseOnMouseEnter: true,
    disableOnInteraction: false,
    delay:1500
  },
  effect : 'coverflow',
    // 如果需要前进后退按钮
    // navigation: {
    //   nextEl: '.swiper-button-next',
    //   prevEl: '.swiper-button-prev',
    // },
    
  })      
  
  $(() => {
    // 校验用户是否登录
    // 根据cookie校验
    // 获取用户名
    let username = getCookie('username');
    if (username) {
      // 将用户名渲染和退出页面中
      $('.login').html(`<a>欢迎<span style="color: rgb(57, 208, 228);font-size: 13px;"> ${username}</span></a><a href="javascript:;" class="logout">退出</a>`)
      // 用户登录信息渲染之后,给退出点击事件,完成退出
      $('.logout').click(() => {
        // 使用一个 提示弹出层
        let index = layer.confirm('你真的要退出吗?', () => {
          // 点击确定
          // 清除cookie
          delCookie('username');
          // 关闭弹出层
          layer.close(index);
          // 渲染登录注册
          $('.login').html(`<a href="longin.html"><span class="	glyphicon glyphicon-user col-md-2 "></span></a>`)
        }, () => {
          layer.msg('你已经取消退出');
        })
  
  
      })
  
  
  
    } else {
      // 渲染登录注册
      $('.login').html(`<a href="longin.html"><span class="glyphicon glyphicon-user col-md-2 "></span></a>`)
    }
  })
  </script>